<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/commons.css}"/>
    <link rel="stylesheet" th:href="@{/static/css/index.css}"/>
</head>
<body>

<div th:replace="admin/commons/bar::#header(activeUrl='classify')"/>

<div class="container" id="app">

    <div th:replace="admin/commons/bar::#header_menu(menuActive='classifyPublish.html',menuActive2='classifyList.html',menuActive3='publish')"/>

    <div class=" main_form">
        <form class="form-horizontal navbar" style="margin-bottom: 200px;">
            <div class="form-group form-group-sm">
                <label class="col-sm-2 control-label" >分类</label>
                <div class="col-sm-6">
                    <input class="form-control" type="text" v-model="name" placeholder="分类">
                </div>

                <div class="navbar-right">
                    <button @click="empty" type="button" class="btn btn-default">清空</button>
                    <button @click="publish" type="button" class="btn btn-success">发布</button>
                </div>

            </div>

        </form>
    </div>


</div>


<div th:replace="admin/commons/bar::#footer"/>


<script th:src="@{/js/jquery.min.js}"/>

<script th:src="@{/lib/vue/vue.min.js}"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!--<script th:src="@{/js/axios.min.js}"></script>-->
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/lib/editorMarkdown/editormd.min.js}"></script>

<script>

    var vue = new Vue({
        el:"#app",
        data:{
            name:"",
            text:"6666"
        },
        methods:{
            empty:function(){
                this.name="";
            },
            publish:function(){
                if(this.name.length>=20){
                    alert("标签name过长 ，请不要超过20个字符")
                }else{
                    $.ajax({
                        type:"post",
                        url:"/blogs/classify",
                        contentType:"application/json;charset=utf-8",
                        dataType:"json",
                        data:JSON.stringify({name:this.name}),
                        success:function(res){
                            window.location.href="classifyList.html";
                        },
                        error:function(res){
                            console.log(res);
                            alert("数据加载出现错误！")
                        }
                    })
                }
            }
        },created(){
        }
    })


</script>

</body>
</html>